<template>
  <div class="word-preview-container" ref="docContainer"></div>
</template>

<script>
import { renderAsync } from 'docx-preview';
import mammoth from 'mammoth';

export default {
  name: 'WordPreview',
  props: {
    fileData: {
      type: Object,
      required: true
    },
    fileType: {
      type: String,
      required: true
    },
    file: {
      type: Object,
      required: true
    }
  },
  mounted() {
    console.log('WordPreview mounted-------->>>>     ', this.fileType, this.fileData,this.file);
    this.renderDocument();
  },
  methods: {
    async renderDocument() {
      try {
        if (this.fileType === 'docx') {
          // 使用 docx-preview 渲染 DOCX
          await renderAsync(this.fileData, this.$refs.docContainer);
        } else if (this.fileType === 'doc') {
          // 使用 mammoth 渲染 DOC
          const result = await mammoth.convertToHtml({ arrayBuffer: this.fileData });
          this.$refs.docContainer.innerHTML = result.value;
        }
      } catch (error) {
        console.error('Word 文档渲染失败:', error);
        this.$emit('error', 'Word 文档渲染失败');
      }
    }
  }
};
</script>

<style scoped>
.word-preview-container {
  width: 100%;
  min-height: 500px;
  padding: 20px;
  background-color: white;
  /* border: 1px solid #ddd; */
  border-radius: 4px;
  overflow: auto;
}
</style>